<style>
  /* 容器 */
  .mega-menu-container {
    display: flex;
    width: 100%;
    font-family: sans-serif;
    position: relative;
  }

  /* 左侧导航 */
  .mega-menu-left {
    width: 200px;
    background: #2b2b2b;
    color: white;
    display: flex;
    flex-direction: column;
  }

  /* 导航项样式 */
  .mega-menu-left div {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.3s;
    position: relative;
  }

  .mega-menu-left div::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #999;
    margin-right: 8px;
    border-radius: 2px;
    transition: background 0.3s;
  }

  .mega-menu-left div:hover,
  .mega-menu-left div.active {
    background: #1a73e8;
  }

  .mega-menu-left div:hover::before,
  .mega-menu-left div.active::before {
    background: #fff;
  }

  /* 右侧多级菜单 */
  .mega-menu-right {
    flex: 1;
    background: #fff;
    padding: 20px;
    display: none;
    flex-wrap: wrap;
    gap: 40px;
    border: 1px solid #eee;
  }

  /* 默认图 */
  .mega-menu-placeholder {
    flex: 1;
    background: url("https://via.placeholder.com/600x400?text=请选择分类")
      center center no-repeat;
    background-size: contain;
    border: 1px solid #eee;
  }

  /* 分类内容展示 */
  .mega-menu-right.show {
    display: flex;
  }

  /* 每列分类 */
  .mega-menu-column {
    min-width: 180px;
  }

  .mega-menu-column h4 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
  }

  .mega-menu-column a {
    display: block;
    color: #444;
    margin-bottom: 6px;
    text-decoration: none;
    font-size: 14px;
  }

  .mega-menu-column a:hover {
    text-decoration: underline;
    color: #007bff;
  }

  /* 产品卡片 */
  .product-card {
    width: 160px;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 8px;
    text-align: center;
    background: #f9f9f9;
  }

  .mega-menu-left div {
    padding: 12px 16px 12px 26px; /* 左边预留出空间放小方块 */
    position: relative;
  }

  .mega-menu-left div::before {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .mega-menu-left div {
    padding: 12px 16px 12px 26px; /* 左边空出给小方块 */
    position: relative;
  }

  .mega-menu-left div::before {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

<div class="mega-menu-container">
  <!-- 左侧导航 -->
  <div class="mega-menu-left">
    <div data-id="cat1">手术外科</div>
    <div data-id="cat2">医用耗材</div>
    <div data-id="cat3">康复理疗</div>
  </div>

  <!-- 右侧内容区域 -->
  <div class="mega-menu-right" id="megaMenuContent">
    <!-- 动态内容插入 -->
  </div>

  <!-- 默认展示图 -->
  <div class="mega-menu-placeholder" id="megaMenuPlaceholder"></div>
</div>
<script>
  const navItems = document.querySelectorAll(".mega-menu-left div");
  const contentArea = document.getElementById("megaMenuContent");
  const placeholder = document.getElementById("megaMenuPlaceholder");

  // 模拟后端数据（可以自行扩展）
  const categoryData = {
    cat1: [
      {
        title: "基础器械",
        items: ["手术刀", "剪刀", "镊子"],
      },
      {
        title: "外科设备",
        items: ["注射泵", "呼吸机", "高频电刀"],
      },
    ],
    cat2: [
      {
        title: "注射类",
        items: ["注射器", "输液器"],
      },
      {
        title: "敷料类",
        items: ["纱布", "绷带", "创可贴"],
      },
    ],
    cat3: [
      {
        title: "理疗仪器",
        items: ["电磁治疗仪", "超声波仪"],
      },
    ],
  };

  // 鼠标悬停左侧分类，显示多级菜单
  navItems.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      navItems.forEach((i) => i.classList.remove("active"));
      item.classList.add("active");

      const catId = item.dataset.id;
      const data = categoryData[catId];

      if (data) {
        contentArea.innerHTML = "";
        data.forEach((col) => {
          const colDiv = document.createElement("div");
          colDiv.className = "mega-menu-column";

          const colTitle = document.createElement("h4");
          colTitle.textContent = col.title;
          colDiv.appendChild(colTitle);

          col.items.forEach((subItem) => {
            const subLink = document.createElement("a");
            subLink.href = "#";
            subLink.textContent = subItem;

            // 点击子项显示产品卡片
            subLink.addEventListener("click", (e) => {
              e.preventDefault(); // 阻止默认跳转
              contentArea.innerHTML = `
                <div class="product-card">产品A - ${subItem}</div>
                <div class="product-card">产品B - ${subItem}</div>
                <div class="product-card">产品C - ${subItem}</div>
              `;
            });

            colDiv.appendChild(subLink);
          });

          contentArea.appendChild(colDiv);
        });

        contentArea.classList.add("show");
        placeholder.style.display = "none";
      }
    });
  });

  // 鼠标移出整个菜单区域，恢复默认图
  document
    .querySelector(".mega-menu-container")
    .addEventListener("mouseleave", () => {
      contentArea.classList.remove("show");
      contentArea.innerHTML = "";
      placeholder.style.display = "block";
      navItems.forEach((i) => i.classList.remove("active"));
    });
</script>
